<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .goods div {
        display: inline-block;
        width: 100px;
        height: 30px;
        border: 1px black solid;
        line-height: 30px;
        text-align: center;
        color: red;
    }

    .show div {
        width: 300px;
        height: 330px;
        display: inline-block;
        margin-right: 20px;
        margin-top: 20px;
        border: 1px black solid;
        padding-left: 20px;
        box-sizing: border-box;
    }

    * {
        list-style: none;
    }

    img {
        width: 250px;
        height: 250px;
    }

    .goods .g1 {
        color: white;
        background-color: red;
    }
</style>

<body>

    <h2>热销爆款</h2>

    <div class="goods">
        <div class="g1">空调</div>
        <div class="g2">平板电视</div>
        <div class="g3">生活电器</div>
    </div>

    <div class="show">
    </div>

    <h2>购物车<button onclick="dell()">删除选中</button></h2>
    <input type="checkbox" class="all">
    <div class="car">

    </div>

    <h2>总价￥：<span class="money">0</span></h2>

    <script>
        // 商品数据
        arr = [{
            pid: 0,
            id: 1,
            name: '美的空调',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/258937/29/27651/129368/67c65b5eF05e7d201/9308a3cb6326101e.jpg',
            price: 2299,
            num: 1,
            is: false
        }, {
            pid: 0,
            id: 2,
            name: '格力空调',
            img: 'https://img11.360buyimg.com/n7/jfs/t1/252895/9/29129/105043/67c8283aF7defb1e5/a286d7e622d92bdc.jpg',
            price: 2199,
            num: 1,
            is: false
        }, {
            pid: 1,
            id: 3,
            name: 'TCL雷鸟',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/230763/14/30539/100263/6760f0fdF4301c1bd/b5d4dfb245fbb941.jpg.avif',
            price: 1668,
            num: 1,
            is: false
        }, {
            pid: 1,
            id: 4,
            name: '小米电视',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/257982/37/25866/101150/67c17175F88b4e1c7/2f085e9b9f52f068.jpg.avif',
            price: 2299,
            num: 1,
            is: false
        }, {
            pid: 2,
            id: 5,
            name: '小米烧水壶',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/255715/2/25179/85101/67bc21a3F53d5aae2/9079ca3ef3d5a3dc.jpg.avif',
            price: 2299,
            num: 1,
            is: false
        }, {
            pid: 2,
            id: 6,
            name: '海尔洗衣机',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/267075/31/28953/146458/67c92890F1c51c443/2f42b9139c1e7e2a.jpg.avif',
            price: 2299,
            num: 1,
            is: false
        },]

        // 购物车数据
        var car_list = []

        // DOM
        var goods = document.querySelectorAll('.goods div')
        var show = document.querySelector('.show')
        var car = document.querySelector('.car')
        var money = document.querySelector('.money')
        var all = document.querySelectorAll('.all')

        // 渲染tab
        arr.forEach(item2 => {
            if (item2.pid == 0) {
                show.innerHTML += `<div class="add">
            <li><img src="${item2.img}"></li>
            <li>${item2.name}</li>
            <li>￥${item2.price}</li>
            <li><button onclick='add(${item2.id})'>添加</button></li>
        </div>`
            }
        })

        goods.forEach((item, index) => {
            item.addEventListener('click', () => {
                show.innerHTML = ''
                arr.forEach(item2 => {
                    if (item2.pid == index) {
                        show.innerHTML += `<div class="add">
            <li><img src="${item2.img}"></li>
            <li>${item2.name}</li>
            <li>￥${item2.price}</li>
            <li><button onclick='add(${item2.id})'>添加</button></li>
        </div>`
                    }
                })
            })
        })

        // 渲染购物车
        function apply() {
            car.innerHTML = ''
            car_list.forEach(item => {
                car.innerHTML += `<li>
            <input type="checkbox" ${item.is ? 'checked' : ''} onclick="dan(${item.id})">
            <img src="${item.img}">
            <span>${item.name}</span>
            <span>￥${item.price}</span>
            <button onclick='jian(${item.id})'>-</button>
            <span>${item.num}</span>
            <button onclick='jia(${item.id})'>+</button>
            <button onclick='del(${item.id})'>删除</button>
        </li>`
            })
        }
        apply()

        // 加入购物车
        function add(id) {
            var a = arr.find(item => item.id == id)
            car_list.push(a)
            apply()
        }

        // 加一
        function jia(id) {
            var a = car_list.findIndex(item => item.id == id)
            car_list[a].num++
            apply()
            zong()
        }

        // 减一
        function jian(id) {
            var a = car_list.findIndex(item => item.id == id)
            if (car_list[a].num != 0) {
                car_list[a].num--
            }
            apply()
            zong()
        }

        // 删除
        function del(id) {
            var a = car_list.findIndex(item => item.id == id)
            car_list.splice(a, 1)
            apply()
            zong()
        }

        // 总价
        function zong() {
            var zong = 0
            car_list.forEach(item => {
                if (item.is) {
                    zong += item.price * item.num
                }
            })
            money.innerHTML = zong
        }

        // 删除选中
        function dell() {
            all.forEach(item => {
                if (item.checked) {
                    var a = car_list.findIndex(item => item.id == id)
                    car_list.splice(a, 1)
                    apply()
                }
            })
        }

        // 全选
        all.onclick = function () {
            car_list.forEach(item => {
                item.is = this.checked
            })
            apply()
            zong()
        }

        // 单价
        function dan(id) {
            var a = car_list.findIndex(item => item.id == id)
            car_list[a].is = event.target.checked
            zong()
        }


        document.querySelector('.g1').addEventListener('click', () => {
            document.querySelector('.g1').style.backgroundColor = 'red'
            document.querySelector('.g1').style.color = 'white'
            document.querySelector('.g2').style.backgroundColor = 'white'
            document.querySelector('.g2').style.color = 'red'
            document.querySelector('.g3').style.backgroundColor = 'white'
            document.querySelector('.g3').style.color = 'red'
        })
        document.querySelector('.g2').addEventListener('click', () => {
            document.querySelector('.g2').style.backgroundColor = 'red'
            document.querySelector('.g2').style.color = 'white'
            document.querySelector('.g1').style.backgroundColor = 'white'
            document.querySelector('.g1').style.color = 'red'
            document.querySelector('.g3').style.backgroundColor = 'white'
            document.querySelector('.g3').style.color = 'red'
        })
        document.querySelector('.g3').addEventListener('click', () => {
            document.querySelector('.g3').style.backgroundColor = 'red'
            document.querySelector('.g3').style.color = 'white'
            document.querySelector('.g2').style.backgroundColor = 'white'
            document.querySelector('.g2').style.color = 'red'
            document.querySelector('.g1').style.backgroundColor = 'white'
            document.querySelector('.g1').style.color = 'red'
        })
    </script>


</body>

</html>